<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>个人页面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <script src="/js/plugins/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/userProfiles.css">
    <script src="/js/common.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script>
        $(function () {
            var params = getParams();

            //从sessionStorage中获取登录的user
            var user = JSON.parse(sessionStorage.getItem("user"));

            //根据id获取当前页面用户信息
            $.get('/users/' + params.id, function (data) {
                $('.info').renderValues(data.result);
                //设置背景
                $('.bg').css('background-image', 'url("' + data.result.coverImgUrl + '")');
            });

            //查询游记数量
            $.get('/users/' + params.id + '/travelsCount', function (data) {
                $('#travelCount').html(data);
            });

            //查询点评数量
            $.get('/users/' + params.id + '/strategycommentCount', function (data) {
                $('#commentCount').html(data);
            });

            //查询是否关注
            if (user) {
                $.get('/users/' + user.id + '/' + params.id, function (data) {
                    if (user.id == params.id) {
                        $('#followBtn').html('自己');
                    } else {
                        if (data) {
                            $('#followBtn').html('取关');
                        } else {
                            $('#followBtn').html('关注');
                        }
                    }
                });
            } else {
                $('#followBtn').html('关注');
            }

            //关注按钮点击事件
            $('#followBtn').click(function () {
                if (user) {
                    if (user.id == params.id) {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '关注自己干哈?',
                            autoClose: 1000,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    } else {
                        if ($('#followBtn').html() == '取关') {
                            $("#followBtn").html('关注');
                            $(document).dialog({
                                type: 'notice',
                                infoText: '取消关注√',
                                autoClose: 1000,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                            $("#fans").html(parseInt($("#fans").html()) - 1);
                            $.ajax({
                                url: "/users/" + user.id + "/" + params.id,
                                method: "delete"
                            })
                        } else {
                            $('#followBtn').html('取关');
                            $(document).dialog({
                                type: 'notice',
                                infoText: '关注√',
                                autoClose: 1000,
                                position: 'center'  // center: 居中; bottom: 底部
                            });
                            $("#fans").html(parseInt($("#fans").html()) + 1);
                            $.ajax({
                                url: "/users/" + user.id + "/" + params.id,
                                method: "post"
                            });
                        }
                    }
                } else {
                    window.location.href = 'login.html';
                }

            });


            //默认第一个分页条
            var flag = 1;
            //当前页的input框
            var currentInput = $('#currentPage');
            //用于存储游记的数组容器
            var travelArr = [];
            //总页数
            var pages = 1;

            $('.nav-link').click(function () {
                //重新初始化参数
                currentInput.val(1);
                travelArr = [];
                pages = 1;
                //判断当前是哪个分页条
                flag = $(this).data('flag');
                if (flag == 1) {
                    tarvelQuery();
                } else if (flag == 2) {
                    commentQuery();
                } else {

                }
            });

            //获取我的游记数据
            function tarvelQuery() {

                //获取当前页的值
                var currentPage = currentInput.val();//1

                //查询游记列表
                $.get('/users/' + params.id + '/travels', {currentPage: currentPage, state: 2}, function (data) {
                    //合并两个数组
                    $.merge(travelArr, data.list);

                    var json = {list: travelArr}//将数组封装成一个json对象,属性名为loop渲染指定的list

                    $('#travels').renderValues(json, {
                        getAddress: function (item, value) {
                            var add = $(item).data('href');
                            $(item).attr('href', add + value);
                        }
                    });

                    //从pageInfo中获取总页数,并设置
                    pages = data.pages;
                });

                //当前页input框+1维护,不能用函数内的变量
                currentInput.val(parseInt(currentPage) + 1);//字符串记得转成数字
            }

            //获取点评列表
            function commentQuery() {

                //获取当前页的值
                var currentPage = currentInput.val();//1

                //查询点评
                $.get('/users/' + params.id + '/strategycomment', {currentPage: currentPage}, function (data) {
                    //合并两个数组
                    $.merge(travelArr, data.list);

                    var json = {list: travelArr}//将数组封装成一个json对象,属性名为loop渲染指定的list

                    $('#comments').renderValues(json, {
                        getAddress: function (item, value) {
                            var add = $(item).data('href');
                            $(item).attr('href', add + value);
                        },
                        //图片回显
                        getImage: function (item, value) {
                            //把图片的地址切分
                            var url = value.split(";");
                            //分割时多了一个,长度要减一
                            for (var i = 0; i < url.length - 1; i++) {
                                $(item).append("<li><img src='" + url[i] + "'></img></li>")
                            }
                        },
                        //星级评价回显
                        getStar: function (item, value) {
                            var dark = 5 - value;
                            for (var i = 0; i < value; i++) {
                                $(item).append("<i class=\"fa fa-star\"></i>")
                            }
                            if (dark > 0) {
                                for (var i = 0; i < dark; i++) {
                                    $(item).append("<i class=\"fa fa-star-o\"></i>")
                                }
                            }
                        }
                    });

                    //从pageInfo中获取总页数,并设置
                    pages = data.pages;
                });

                //当前页input框+1维护,不能用函数内的变量
                currentInput.val(parseInt(currentPage) + 1);//字符串记得转成数字
            }

            function query() {
                if (flag == 1) {
                    tarvelQuery();
                }
                else if (flag == 2) {
                    commentQuery();
                } else {

                }
            }

            //默认查询第一页的数据
            query();

            //当页面滚动条变化时,执行的函数
            $(window).scroll(function () {
                if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
                    //获取当前页
                    var currentPage = currentInput.val();
                    //判断是否大于最后一页
                    if (currentPage <= pages) {
                        query();
                    } else {//最后一页,提示
                        $(document).dialog({
                            type: 'notice',
                            infoText: '到底',
                            autoClose: 1500,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    }
                }
            });
            $('#letterBtn').click(function () {
                if (user) {
                    if (user.id == params.id) {
                        $(document).dialog({
                            type: 'notice',
                            infoText: '不能私信自己',
                            autoClose: 1000,
                            position: 'center'  // center: 居中; bottom: 底部
                        });
                    } else {
                        var sendId = params.id;
                        var headImgUrl = $('#headImgUrl').attr('src');
                        var nickName = $('#nickName').html();
                        $.ajax({
                            url: '/letter',
                            data: "acceptId=" + user.id + "&state=1" + "&sendId=" + sendId,
                            type: 'put',
                            success: function () {
                                //跳转到具体聊天 页面 讲聊天人的 id和名字和头像带过页面
                                window.location.href = '/mine/chat.html?acceptId=' + sendId + '&acceptName=' + nickName + '&acceptHeadImgUrl=' + headImgUrl + '&';
                            }
                        });
                    }
                } else {
                    window.location.href = 'login.html';
                }
            })
        });
    </script>
</head>
<body>
<input type="hidden" name="currentPage" id="currentPage" value="1"/>
<div class="container bg">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container  myBg">
        <div class="info">
            <img class="rounded-circle" id="headImgUrl" width="17%" render-src="headImgUrl">
            <p class="name" id="nickName" render-html="nickName"></p>
            <p render-html="sign"></p>

            <div class="row num">
                <div class="col-2 border border-left-0 border-top-0 border-bottom-0">
                    <div>
                        <span render-html="followers" id="followers"></span>
                    </div>
                    <div>
                        <span>关注</span>
                    </div>
                </div>
                <div class="col-2">
                    <div>
                        <span render-html="fans" id="fans"></span>
                    </div>
                    <div>
                        <span>粉丝</span>
                    </div>
                </div>
                <div class="col">
                    <button class="btn btn-outline-light ibtn" id="letterBtn">私信</button>
                    <button class="btn btn-success btn-sm" id="followBtn"></button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels" data-flag="1">
                TA的游记[<span id="travelCount"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments" data-flag="2">
                TA的点评[<span id="commentCount"></span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" data-flag="3">
                TA的旅行单[<span>1</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
            <dl class="list" render-loop="list">
                <dd>
                    <a data-href="travelContent.html?id=" render-key="list.id" render-fun="getAddress">
                        <img render-src="list.coverUrl">
                        <p>
                            <span class="title" render-html="list.title"></span>
                            <span class="span-right">
                                <span render-html="list.likeCount"></span> <i class="fa fa-thumbs-o-up"></i></span>
                        </p>
                    </a>
                    <hr>
                </dd>
            </dl>
        </div>
        <div class="comment tab-pane fade " id="comments">
            <input type="hidden" name="currentPage" value="1">
            <input type="hidden" name="pageSize" value="5">
            <input type="hidden" name="rows" value="1">
            <div render-loop="list">
                <div class="row">
                    <div class="col-2 comment-head">
                        <a data-href="userProfiles.html?id=" render-key="list.user.id" render-fun="getAddress">
                            <img class="rounded-circle" render-src="list.user.headImgUrl">
                        </a>
                    </div>
                    <div class="col">
							<span class="comment-star" render-key="list.starNum" render-fun="getStar">
                        	</span>
                        <span class="comment-date" render-html="list.commendTime"></span>
                        <div class="comment-content">
                            <a data-href="mine/strategyComment.html?strategycommentId=" render-key="list.id"
                               render-fun="getAddress">
                                <p render-html="list.content"></p>
                            </a>
                        </div>
                        <ul class="comment-img" render-key="list.imgUrls" render-fun="getImage">
                        </ul>

                        <div class="comment-link">
                            <a data-href="strategyCatalogs.html?strategyId=" render-key="list.strategy.id"
                               render-fun="getAddress">
                                <img render-src="list.strategy.coverUrl"> <span
                                    render-html="list.strategy.title"></span>
                                <i class="fa fa-angle-right fa-2x"></i>
                            </a>
                        </div>

                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane fade" id="pills-contact">去棠下</div>
    </div>
</div>
</body>
</html>